<template>
    <div v-if="!item.meta || !item.meta.hidden ||item.meta.hidden=='1' "
         :class="[isCollapse ? 'simple-mode' : 'full-mode', {'first-level': isFirstLevel}]">
        <!--        <div v-if="childDontHaveShow">-->
        <!--            <sidebar-item-link v-if="theOnlyOneChild.meta"-->
        <!--                               :to="resolvePath(theOnlyOneChild.path)">-->
        <!--                <el-menu-item :index="resolvePath(theOnlyOneChild.path)"-->
        <!--                              :class="{'submenu-title-noDropdown': isFirstLevel}">-->
        <!--                    <svg-icon v-if="theOnlyOneChild.meta.icon"-->
        <!--                              :name="theOnlyOneChild.meta.icon"/>-->
        <!--                    <span v-if="theOnlyOneChild.meta.title"-->
        <!--                          slot="title">{{ theOnlyOneChild.meta.title}}</span>-->
        <!--                    &lt;!&ndash;                    >{{  $t('route.' + theOnlyOneChild.meta.title) }}</span>&ndash;&gt;-->
        <!--                </el-menu-item>-->
        <!--            </sidebar-item-link>-->
        <!--        </div>-->
        <!--        <div v-else>-->

        <!--菜单-->
        <div v-if="!alwaysShowRootMenu && notDirectory">

            <div v-if="theOnlyOneChild.meta" @click="clickHandler(resolvePath(theOnlyOneChild.path))">

                <el-menu-item :index="resolvePath(theOnlyOneChild.path)"
                              :class="{'submenu-title-noDropdown': isFirstLevel}">
                    <svg-icon v-if="theOnlyOneChild.meta.icon"
                              :name="theOnlyOneChild.meta.icon"/>
                    <span v-if="theOnlyOneChild.meta.title"
                          slot="title">{{ theOnlyOneChild.meta.title}}</span>
                    <!--                    >{{  $t('route.' + theOnlyOneChild.meta.title) }}</span>-->
                </el-menu-item>

            </div>
        </div>

        <!--目录-->
        <el-submenu v-else :index="resolvePath(item.path)" popper-append-to-body>

            <template slot="title">
                <svg-icon
                        v-if="item.meta && item.meta.icon"
                        :name="item.meta.icon"/>
                <span v-if="item.meta && item.meta.title"
                      slot="title">{{ item.meta.title }}</span>
                <!--                >{{ $t('route.' + item.meta.title) }}</span>-->
            </template>

            <template v-if="item.children">
                <sidebar-item
                        v-for="child in item.children"
                        :item="child"
                        :is-collapse="isCollapse"
                        :is-first-level="false"
                        :base-path="resolvePath(child.path)"
                        class="nest-menu"
                />
            </template>

        </el-submenu>
        <!--        </div>-->
    </div>

</template>

<script lang="ts">
    import path from 'path'
    import {Component, Prop} from 'vue-property-decorator'
    import {RouteConfig} from 'vue-router'
    import SidebarItemLink from './SidebarItemLink.vue'
    import {mixins} from "vue-class-component";
    import Kit from "@/core/mixin/Kit";
    import {validate} from "@/core/utils/validate";

    @Component({
        // Set 'name' here to prevent uglifyjs from causing recursive component not work
        // See https://medium.com/haiiro-io/element-component-name-with-vue-class-component-f3b435656561 for detail
        name: 'SidebarItem',
        components: {
            SidebarItemLink
        }
    })
    export default class extends mixins(Kit) {
        @Prop({required: true}) private item!: RouteConfig
        @Prop({default: false}) private isCollapse!: boolean
        @Prop({default: true}) private isFirstLevel!: boolean
        @Prop({default: ''}) private basePath!: string

        //存在子路由，但是全部都是隐藏的，此时显示父级路由
        get childDontHaveShow() {
            let showingChildren: any = [];
            if (this.item.children) {
                showingChildren = this.item.children.filter((item) => {
                    if (item.meta && item.meta.hidden && item.meta.hidden == "2") {
                        return false
                    } else {
                        return true
                    }
                })
            }
            if (showingChildren.length == 0) {
            }
            return showingChildren.length == 0;
        }

        get alwaysShowRootMenu() {
            if (this.item.meta && this.item.meta.alwaysShow && this.item.meta.alwaysShow == "1") {
                return true
            }
            return false
        }

        //false:是目录
        //true:不是目录
        get notDirectory() {
            return this.theOnlyOneChild && (!this.theOnlyOneChild.children || this.theOnlyOneChild.children.length === 0);
        }

        get showingChildNumber() {
            if (this.item.children) {
                const showingChildren = this.item.children.filter((item) => {
                    if (item.meta && item.meta.hidden && item.meta.hidden == "2") {
                        return false
                    } else {
                        return true
                    }
                })
                return showingChildren.length
            }
            return 0
        }

        get theOnlyOneChild() {
            if (this.showingChildNumber > 1) {
                return null
            }
            if (this.item.children) {
                for (let child of this.item.children) {
                    if (!child.meta || !child.meta.hidden || !(child.meta.hidden == "2")) {
                        return child
                    }
                }
            }
            // If there is no children, return itself with path removed,
            // because this.basePath already conatins item's path information
            return {...this.item, path: ''}
        }

        resolvePath(routePath: string) {
            if (validate.isExternal(routePath)) {
                return routePath
            }
            if (validate.isExternal(this.basePath)) {
                return this.basePath
            }
            return path.resolve(this.basePath, routePath)
        }

        /**
         * 路由点击跳转事件
         */
        clickHandler(to: any) {
            // //console.log("path", this.$route.path)
            // //console.log("to", to)
            //如果当前地址栏路由和所跳转理由一直，那么就跳转到这个空白页，在跳转回来，相当于刷新功能
            if (this.$route.path == to) {
                this.go("RedirectBeforeView")
                return;
            }

            this.go(to)
        }
    }
</script>

<style lang="scss">
    .el-submenu.is-active > .el-submenu__title {
        color: $subMenuActiveText !important;
    }

    .full-mode {
        .nest-menu .el-submenu > .el-submenu__title,
        .el-submenu .el-menu-item {
            min-width: $sideBarWidth !important;
            background-color: $subMenuBg !important;

            &:hover {
                background-color: $subMenuHover !important;
            }
        }
    }

    .simple-mode {
        &.first-level {
            .submenu-title-noDropdown {
                padding: 0 !important;
                position: relative;

                .el-tooltip {
                    padding: 0 !important;
                }
            }

            .el-submenu {
                overflow: hidden;

                & > .el-submenu__title {
                    padding: 0px !important;

                    .el-submenu__icon-arrow {
                        display: none;
                    }

                    & > span {
                        visibility: hidden;
                    }
                }
            }
        }
    }
</style>

<style lang="scss" scoped>
    .svg-icon {
        margin-right: 16px;
    }

    .simple-mode {
        .svg-icon {
            margin-left: 20px;
        }
    }
</style>
